<template>
    <div>
        <div class="fun-header">
            <div class="mb-40" @click="sos('1')">
                <img :src="oneUrl" />
                <span>为自己呼救</span>
            </div>
            <div @click="sos('2')">
                <img :src="otherUrl" />
                <span>为他人呼救</span>
            </div>
        </div>
        <div class="fun-body">
            <div class="fun-body-head">为亲友呼救</div>
            <div class="fun-body-list">
                <div v-for="(item, index) in lists" :key="index"  @click="sos('3')">
                    <img :src="item.imgUrl ? item.imgUrl : otherUrl">
                    <span>{{item.name}}</span>
                </div>
                <div v-if="this.listNum < 5" @click="addFriend">
                    <img :src="addUrl">
                    <span>点击添加</span>
                </div>
            </div>
        </div>
        <div class="fun-footer">
            <div @click="linktoEMKnowledge">
                <img :src="EMKnowledge_2">
                <span>胸痛知识</span>
            </div>
            <div>
                <img :src="EMFun_1">
                <span  class="active">一键呼救</span>
            </div>
            <div @click="linktoEMMine">
                <img :src="EMMine_2">
                <span>我的</span>
            </div>
        </div>
    </div>
</template>
<script>
const otherUrl = require('@/assets/img/othershdpi.png')
const addUrl = require('@/assets/img/add.png')

const EMKnowledge_2 = require('@/assets/img/1-2hdpi.png')
const EMMine_2 = require('@/assets/img/3-2hdpi.png')
const EMFun_1 = require('@/assets/img/2-1hdpi.png')

const oneUrl = require('@/assets/img/touxiang/1.png')
const twoUrl = require('@/assets/img/touxiang/2.png')
const threeUrl = require('@/assets/img/touxiang/3.png')
const fourUrl = require('@/assets/img/touxiang/4.png')
const fiveUrl = require('@/assets/img/touxiang/5.png')
import { MessageBox } from 'mint-ui'
export default {
    data () {
        return {
            EMKnowledge_2: EMKnowledge_2,
            EMFun_1: EMFun_1,
            EMMine_2: EMMine_2,
            otherUrl: otherUrl,
            addUrl: addUrl,
            oneUrl: oneUrl,
            twoUrl: twoUrl,
            threeUrl: threeUrl,
            fourUrl: fourUrl,
            fiveUrl: fiveUrl,
            lists: [],
            listNum: 0
        }
    },
    mounted () {
        let id = this.LocalStorageUtil.getItem('patientId')
        if (id) {
            this.ACApi.getpatientsRelatives({
                id: id
            },{
                onSuccess: res => {
                    if (res.data.success) {
                        this.lists = res.data.result
                        this.listNum = res.data.result.length
                    }
                },
                onFail: error => console.log(error)
            })
        }
    },
    methods: {
        sos (type) {
            let patientId = this.LocalStorageUtil.getItem('patientId')
            let json = {
                type: type
            }
            if (type == '1' || type == '3') {
                if (!patientId) {
                    MessageBox({
                        message: '请先填写我的档案，确定前往填写?',
                        showCancelButton: true
                    }).then(res => {
                        if (res == 'confirm') {
                            this.$router.push({ path: '/wxemmine/myarchives'})
                        }
                    })
                } else {
                    this.$router.push({ path: '/wxemfun/wxemfunmine', query: json})
                }
            } else {
                this.$router.push({ path: '/wxemfun/wxemfunmine', query: json})
            }
        },
        addFriend () {
            let id = this.LocalStorageUtil.getItem('patientId')
            if (!id) {
                MessageBox({
                    message: '请先填写我的档案，确定前往填写?',
                    showCancelButton: true
                }).then(res => {
                    if (res == 'confirm') {
                        this.$router.push({ path: '/wxemmine/myarchives'})
                    }
                })
            } else {
                this.$router.push({ path: '/wxemmine/myfriends/addfriends' })
            }
        },
        linktoEMKnowledge () {
            this.$router.push({ path: '/wxemknowledge2' })
        },
        linktoEMMine () {
            this.$router.push({ path: '/wxemmine' })
        }
    }
}
</script>
<style lang="stylus" scoped>
@import '../../assets/css/layout'
@import '../../assets/css/var'
.fun-header {
    box-sizing: border-box
    $column()
    width: 100%
    background: $e7ecee
    padding  .4rem
    div {
        $row()
        $flex-ac()
        width: 6.7rem
        height: 1.2rem
        background: $White
        color: $lBlack
        font-size: $text-font28
        img {
            width: .8rem
            height: .8rem
            border-radius: .4rem
            margin: 0 .4rem
        }
        &.mb-40 {
            margin-bottom: .4rem    
        }
    }
}
.fun-body {
    $column()
    .fun-body-head {
        $column()
        $flex-vc()
        height: .9rem
        color: $lBlack
        padding-left: .4rem
        font-size: $text-font28
        background: $White
        border-bottom: .02rem solid $dWhite
    }
    .fun-body-list {
        $row()
        padding-bottom: 1rem
        div {
            $column()
            $flex-ac()
            box-sizing: border-box
            width: 2.5rem
            height: 2.5rem
            background: $White
            border-right: 0.01rem solid $dWhite
            border-bottom: 0.01rem solid $dWhite
            img {
                width: .8rem
                height: .8rem
                border-radius: .4rem
                margin: .55rem 0 .40rem 0
            }
            span {
                font-size: $text-font24
                color: $lBlack
            }
        }
    }
}
.fun-footer {
    width: 100%
    height: 1.2rem
    background: $White
    position: fixed
    bottom: 0
    border-top: 1px solid $dWhite
    z-index: 1000
    $row()
    div {
        flex: 1
        $column()
        $flex-vc()
        $flex-ac()
        img {
            width .8rem
            height: .8rem
        }
        span {
            font-size: $text-font21
            color: $elBlack
            &.active {
                color: $green
            }
        }
    }
}
</style>
